<template>
    <div class="title-box">
        <input v-model.trim="newItem" class="in-box" @keyup.enter="addNewItem" placeholder="今天想做些什么呢？">
        <button @click="addNewItem" type="button" class="btn"
            @mouseenter="isHover = true"
            @mouseleave="isHover = false">
            <img :src="isHover ? hoverImage : normalImage" alt="" class="sub-icon">
        </button>
    </div>
</template>

<script setup>
import { useMsgStore } from '@/stores/msgStores'
import { ref } from 'vue'
import hoverImage from '@/icon/icons8-hand-50.png'
import normalImage from '@/icon/icons8-hand-50-2.png'

const isHover = ref(false)
const msgStore = useMsgStore()
const newItem = ref('')

const addNewItem = () => {
  if (newItem.value.trim()) { // 检查非空
    msgStore.addToList(newItem.value.trim())
    newItem.value = ''
  } else {
    alert('请输入内容')
  }
}
</script>

<style scoped>
    .title-box {
        display: flex;
        justify-content: center;
        height: 60px;
        width: 600px;
        padding-top: 20px;
        text-align: center;
    }
    .title-box .in-box {
        height: 40px;
        width: 250px;
        border: 2px solid black;
        border-radius: 10px 0 0 10px;
        border-right: none;
        padding-left: 10px;
        outline: none;
    }
    .title-box .btn {
        height: 40px;
        width: 50px;
        border: 2px solid black;
        border-radius:  0 10px 10px 0;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .title-box .btn .sub-icon{
        transition: all 0.3s ease;
        height: 25px;
        width: 25px;
    }
    .title-box .btn:hover{
        transition: all 0.3s ease;
        background-color: #242424;
    }

    .title-box .btn .sub-icon:hover{
        transform: scale(1.1);
        height: 25px;
        width: 25px;
    }
</style>